<!DOCTYPE html>
  <html>
  <head>
    <title>Superformula</title>
    <script type="text/javascript" src="../../d3.js"></script>
    <script type="text/javascript" src="superformula.js"></script>
    <style type="text/css">

path {
  stroke-width: 1.5px;
}

path.small {
  fill: steelblue;
}

path.big {
  stroke: #666;
  fill: #ddd;
}

path.small:hover {
  stroke: steelblue;
  fill: lightsteelblue;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var size = 1000;

var x = d3.scale.ordinal()
    .domain(superformulaTypes)
    .rangePoints([0, 960], 1);

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);

var small = superformula()
    .type(String)
    .size(size);

var big = superformula()
    .type("square")
    .size(size * 50)
    .segments(360);

svg.selectAll("a")
    .data(superformulaTypes)
  .enter().append("a")
    .attr("xlink:title", String)
    .attr("transform", function(d, i) { return "translate("+ x(d) + ",40)"; })
  .append("path")
    .attr("class", "small")
    .attr("d", small)
    .on("mousedown", function() { d3.select(this).style("fill", "aliceblue"); })
    .on("mouseup", function() { d3.select(this).style("fill", null); })
    .on("click", function(d) { d3.select(".big").transition().duration(500).attr("d", big.type(d)); });

svg.append("path")
    .attr("class", "big")
    .attr("transform", "translate(450,250)")
    .attr("d", big);

    </script>
  </body>
</html>
